<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments_login :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--    引入semantic.min.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <!--    引入me.css-->
  <link rel="stylesheet" href="../static/css/me.css">
  <title>收藏夹</title>
</head>
<body>

<!--导航-->
<nav th:replace="_fragments_login :: menu(0)" class="ui inverted attached segment m-padded-tb-mini">
  <div class="ui container"> <!-- 加一个容器 -->
    <div class="ui inverted secondary stackable menu"> <!-- 菜单 stackable:可堆叠的,表示屏幕小时自动堆叠-->
      <h2 class="ui white header item">GuideSystem</h2> <!-- 蓝绿色标题 -->
      <a href="#" class="m-item m-mobile-hide item"><i class="home icon"></i>首页</a> <!-- icon表示图表 -->
      <a href="#" class="m-item m-mobile-hide item"><i class="edit outline icon"></i>记录</a>
      <a href="#" class="m-item m-mobile-hide item"><i class="info icon"></i>我的</a>
      <div class="m-top-right m-mobile-hide item m-item" style="margin-top: 5px"> <!-- 靠右 -->
        <div class="ui icon input">
          <input type="text" placeholder="Search...">
          <i class="search link icon"></i>
        </div>
        <div class="ui dropdown item">
          <div class="text">
            <img src="../static/images/店铺1.jpg" th:src="@{/images/IMG_6361.JPG}"
                 alt="" class="ui avatar image">
          </div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <a href="#" th:href="@{/login/exit}" class="item">足迹</a>
            <a href="#" th:href="@{/login}" class="item">我的</a>
            <a href="#" th:href="@{/edit/password}" class="item">修改密码</a>
            <a href="#" th:href="@{/login/exit}" class="item">退出</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black button icon m-top-right m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<!--选择栏-->
<div cLass="ui attached pointing menu" style="margin-top: 4.4em;">
  <div class="ui container">
    <div class="right menu">
      <a href="#" th:href="@{/collection/resource/list}" class="blue item">考研博客</a>
      <a href="#" th:href="@{/collection/blog/list}" class="blue active item">社区帖子</a>
    </div>
    </di>
  </div>
</div>


<!--中间内容-->
<div class="m-container-plus m-padded-tb-big" style="padding-top: 4em !important;" id="contentDiv">
  <div class="ui stackable grid"> <!--id="example1"-->
    <!--左侧主体-->
    <div class="eleven wide column">
      <div class="ui container">
        <!--header -->
        <div class="ui top attached segment"> <!-- segment:占定一个空间 attached:附加/连接-->
          <div class="ui middle aligned two column grid"> <!-- middle aligned:垂直方向居中 -->
            <div class="column">
              <h4 class="ui header">收藏数量</h4>
            </div>
            <div class="right aligned column">
              共 <h3 class="ui orange header m-inline-block m-text-thin" th:text="${totalCollectionsCount}">
              16</h3> 篇
            </div>
          </div>
        </div>
        <br>

        <th:block th:each="collectionList : ${groupedCollectionList}">
          <h3 class="ui center aligned header m-text-header-thin" th:if="${not #lists.isEmpty(collectionList)}"
              th:text="${#dates.format(collectionList?.get(0)?.time, 'yyyy-MM')}">9月</h3>
          <div class="ui fluid vertical menu">
            <a href="#" target="_blank" class="item m-margin-top-mini" th:each="collection : ${collectionList}"
               th:href="@{/user_blog/{id}(id=${collection.id})}">
                <span>
                    <span th:text="${collection.title}">兰花熊掌</span>
                </span>
              <div class="ui orange basic left pointing label" th:text="${collection.tag}">标签
              </div>
            </a>
            <!--/*-->
            <a href="#" target="_blank" class="item m-margin-top-mini">
                <span>
                    <span th:text="${blog.title}">兰花熊掌</span>
                </span>
              <div class="ui orange basic left pointing label" th:text="${#dates.format(blog.updateTime, 'MMMdd')}">标签
              </div>
            </a>
            <!--*/-->
          </div>
          <!--/*-->
          <h3 class="ui center aligned header m-text-header-thin">8月</h3>
          <div class="ui fluid vertical menu">
            <a href="#" target="_blank" class="item m-margin-top-mini">
                <span>
                    <span th:text="${blog.title}">冰糖血燕窝</span>
                </span>
              <div class="ui orange basic left pointing label" th:text="${#dates.format(blog.updateTime, 'MMMdd')}">
                8月07
              </div>
            </a>
            <a href="#" target="_blank" class="item m-margin-top-mini">
                <span>
                    <span th:text="${blog.title}">冰糖血燕窝</span>
                </span>
              <div class="ui orange basic left pointing label" th:text="${#dates.format(blog.updateTime, 'MMMdd')}">
                8月22
              </div>
            </a>
            <a href="#" target="_blank" class="item m-margin-top-mini">
                <span>
                    <span th:text="${blog.title}">冰糖血燕窝</span>
                </span>
              <div class="ui orange basic left pointing label" th:text="${#dates.format(blog.updateTime, 'MMMdd')}">
                8月23
              </div>
            </a>
          </div>
          <h3 class="ui center aligned header m-text-header-thin">7月</h3>
          <div class="ui fluid vertical menu">
            <a href="#" target="_blank" class="item m-margin-top-mini">
                <span>
                    <span th:text="${blog.title}">佛跳墙</span>
                </span>
              <div class="ui orange basic left pointing label" th:text="${#dates.format(blog.updateTime, 'MMMdd')}">
                7月07
              </div>
            </a>
            <a href="#" target="_blank" class="item m-margin-top-mini">
                <span>
                    <span th:text="${blog.title}">佛跳墙</span>
                </span>
              <div class="ui orange basic left pointing label" th:text="${#dates.format(blog.updateTime, 'MMMdd')}">
                7月22
              </div>
            </a>
            <a href="#" target="_blank" class="item m-margin-top-mini">
                <span>
                    <span th:text="${blog.title}">佛跳墙</span>
                </span>
              <div class="ui orange basic left pointing label" th:text="${#dates.format(blog.updateTime, 'MMMdd')}">
                7月23
              </div>
            </a>
            <a href="#" target="_blank" class="item m-margin-top-mini">
                <span>
                    <span th:text="${blog.title}">佛跳墙</span>
                </span>
              <div class="ui orange basic left pointing label" th:text="${#dates.format(blog.updateTime, 'MMMdd')}">
                7月23
              </div>
            </a>
          </div>
          <!--*/-->
        </th:block>
      </div>
    </div>

    <!--粘性侧边栏-->
    <div class="five wide column">
      <div class="ui sticky">
        <!--热度前八-->
        <div class="ui container segment">
          <h3>
            热度前八
          </h3>
          <div class="ui relaxed list">
            <a class="item" th:href="@{/user_blog/{id}(id=${blog.id})}" target="_blank" th:each="blog : ${hotBlogs}">
              <i class="right triangle icon"></i>
              <div class="content">
                <div class="header" style="font-weight: normal; font-size: 14px" th:text="${blog.title}">图标对齐方式
                </div>
              </div>
            </a>
          </div>
        </div>
        <!--收藏量前八-->
        <div class="ui container segment">
          <h3>
            收藏量前八
          </h3>
          <div class="ui relaxed list">
            <a class="item" th:href="@{/user_blog/{id}(id=${blog.id})}" target="_blank"
               th:each="blog : ${collectionMaxB}">
              <i class="right triangle icon"></i>
              <div class="content">
                <div class="header" style="font-weight: normal; font-size: 14px" th:text="${blog.title}">图标对齐方式
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="m-padded m-right-bottom m-fixed">
  <div class="ui vertical icon buttons">
    <a href="feedback.html" th:href="@{/feedback}" type="button" class="ui blue button">反馈</a>
    <a href="#" th:href="@{/fblog/input}" class="ui blue button">写贴</a>
    <button class="ui icon button"><i class="headphones icon"></i></button>
    <a id="toTop-button" class="ui button"><i class="chevron up icon"></i></a>
  </div>
</div>

<!--底部footer-->
<!-- vertical:垂直的 segment:条横 inverted:倒置的 -->
<footer th:replace="_fragments_login :: footer" class="ui inverted vertical segment m-padded-tb-massive">
  <div class="ui center aligned container"> <!-- center aligned:居中 aligned:使成为一条线-->
    <div class="ui inverted divided stackable grid"> <!-- inverted divided grid:格线分成16份 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">消费者权益</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin">消费者热线：3838438</span>
          <span class="item m-text-thin">外卖热线：5201314</span>
          <span class="item m-text-thin">已获得食品安全局认证</span>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">商家加盟</h4>
        <div class="ui inverted link list">
          <a href="#" class="item m-text-thin">食品外卖开店申请</a>
          <a href="#" class="item m-text-thin">美食商家入驻(非外卖)</a>
          <a href="#" class="item m-text-thin">合作/招聘</a>
        </div>
      </div>

      <!-- 分成三列 -->
      <div class="three wide column">
        <h4 class="ui inverted header m-text-thin">联系我</h4>
        <div class="ui inverted link list">
          <span class="item m-text-thin" style="height: 28px">邮箱: 1923326384@qq.com</span>
          <span class="item m-text-thin">QQ: 1923326384</span>
        </div>
      </div>

      <!-- 分成七列 -->
      <div class="seven wide column">
        <h4 class="ui inverted header m-text-thin">企业文化</h4>
        <p class="m-text-thin m-text-spaced m-opacity-mini m-text-lined">
          消费者第一，商家第二 | 诚信诚实正直，言出必践言行一致 | 以“吃”为核心，建设生活服务业从需求侧到供给侧的多层次科技服务平台。
        </p>
      </div>

    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2022-05-29 HanYuFan Designed by HanYuFan</p>
  </div>
</footer>

<th:block th:replace="_fragments_login :: script">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  <script type="text/javascript" src="../static/js/app.js"></script>
  <script type="text/javascript" src="../static/js/main.min.js"></script>
</th:block>
<script>
    /*$('.ui.sticky').sticky({
        context: '#example1'
    });*/
</script>

</body>
</html>